<style>
    .album-box{ min-height: 380px;}
    .album-list-big li{ float: left; width: 230px; margin:0 25px 10px 0;}
    .album-pic-big{ display: block; width: 220px; height: 165px;}

    .album-list li{ float: left; width: 136px; margin:0 25px 10px 0;}
    .album-border{ position: relative; border: 1px solid #ccc; padding: 4px;}
    .album-pic{ display: block; width: 126px; height: 140px;}
    .album-order{ height: 20px; margin-top: 4px;}
    .count-small-box .input-text{ padding:0px 4px; height: 20px; font-size:12px; line-height:18px;}
    .count-small-box .count{ width: 18px; height: 18px}
    .count-small-box .count i{ border: 4px solid #fff; border-bottom-color: #656565}
    .count-small-box .count-up{ height: 8px; padding: 0 4px 1px}
    .count-small-box .count-down{height: 8px; padding: 1px 4px 0}
    .count-small-box .count-down i{ border-bottom-color: #fff; border-top-color: #656565}
    .album-list-name{ padding: 4px 0; line-height: 22px; text-align: center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
    .album-opr-btn{ display: none;}
    .album-border:hover .album-opr-btn{ display: block;}
    .album-del,.album-edit,.album-set{ position: absolute; right: -1px; top: -1px; width: 20px; height: 20px; display: block; cursor: pointer; background-color: rgba(0,0,0,0.5);}
    .album-edit,.album-set{ right: 19px;}
    .album-list li.album-add{ width: 134px; height: 148px; border: 1px dashed #ccc; margin: 0; background-color: #f7f7f7; cursor: pointer;}
    .album-add i{ display: block; width: 40px; height: 40px; margin: 55px auto 12px; background: url(http://img-dev.myscrmimg.cn/projects/qmyx/public/images/icon/icon_add.png) no-repeat; background-size: 40px 40px;}
    .album-add span{ display: block; text-align: center;}
    .album-list-big li.album-add-big{ width: 228px; height: 173px; border: 1px dashed #ccc; margin: 0; background-color: #f7f7f7; cursor: pointer;}

    #albumListBox li:nth-child(5){ margin-right: 0}
    .upload-photo{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0);}

    .upload-album .upload-wrap,
    .upload-album .upload-process,
    .upload-album .upload-wrap img{ height: 102px; line-height: 100px}
    .upload-album .upload-btn{ height: 100px}
    .upload-album .upload-icon{ margin-top: 35px;}
    .upload-album .mt20{ margin-top:50px !important;}
    
</style>
<div class="search mt15 clearfix ng-scope">
    <input type="text" class="input-text fl" style="width:470px" placeholder="相册名称" value="" id="albumNameInput">
    <button class="fl btn" id="searchAlbum">搜索</button>
</div>
<div class="table-header mt10"><span class="lh30 f14">相册列表</span></div>
<div id="content_wrap">
    <div class="album-box mt15" id="app_photo_list">
        <ul class="album-list-big clearfix" id="album_grid">
            <script id="album_row_tmpl" type="text/html">
                {{each list as value i}}
                <li id="{{value.po_photoId}}" class="js-photo-item">
                    <div class="album-border js-open-album cursor">
                        <img src="{{value.picurl}}" alt="" class="album-pic-big">
                        <div class="album-opr-btn">
                            <span class="album-del js-del permission p-50040203-03-block"><i class="icon-op icon-op-del-w"></i></span>
                            <span class="album-edit js-edit permission p-50040203-02-block"><i class="icon-op icon-op-edit-w"></i></span>    
                        </div>

                    </div>
                    <p class="album-list-name" title="{{value.title}}">{{value.title}}</p>
                </li>
                {{/each}}
                <li class="album-add album-add-big" id="btn_add"><i></i><span class="c-blue">创建相册</span></li>
            </script>
        </ul>
    </div>
    <div id="pagination" class="pagination"></div>
</div>

<!-- <div class="step-num" style="position:relative;">
    <div class="num-fav"><a class="checked">1</a><span class="mt5 fl c-orange">基本信息</span></div>
    <div class="num-fav" style="left: 148px;"><a>2</a><span class="mt5 fl">上传图片</span></div>
    <div class="bottom-line" style="width: 160px;left:10px;"></div>
</div> -->

<!-- 创建相册 -->
<script id="add_album_tmpl" type="text/html">
<div style="max-height: 400px; overflow: auto;" class="mt20">
    <table width="100%">
      <tr>
        <td width="135" align="right" class="form-cell" valign="top"><span class="c-red">* </span>相册名称：</td>
        <td class="cell-split-s">            
            <input type="text" id="title" class="input-text fl mr10" value="{{title}}" style="width:400px" maxlength="16">
         </td>
      </tr>
      <tr>
        <td align="right" class="form-cell" valign="top"><span class="c-red">* </span>相册封面图：</td>
        <td class="cell-split">
            <div id="fileupload" class="fileinput-button fl upload-album">
                <div class="upload-wrap" id="img_wrap">
                    {{if picurl && picurl != ""}}
                          <img src="{{picurl}}" alt="" />
                    {{else}}
                          <div class="upload-btn"><i class="upload-icon"></i></div>
                    {{/if}}
                </div>
                <input type="file" name="file" />
                <div class="fl lh30 mt20">
                    <p class="c-gray f12">推荐尺寸640像素×480像素，宽高比4:3</p>
                      <span >
                          <span class="c-blue f12">上传图片</span>
                      </span>
                </div>
            </div>
            <input type="hidden" id="picurl" value="{{picurl}}" />
        </td>
      </tr>
      <tr>
        <td align="right" class="form-cell" valign="top">相册介绍：</td>
        <td class="cell-split-s"><textarea type="text" id="info"
                                           class="fl textarea mr10"
                                           style="width:350px; height:70px"
                                           maxlength="150">{{info}}</textarea>

            <p class="c-gray lh30 f12" style="padding-top:45px">限制150个字符</p>
        </td>
      </tr>
      <tr>
        <td align="right" class="form-cell" valign="top">显示相册介绍：</td>
        <td class="cell-split">
            <div class="switch {{if isshowinfo == 1}}switch-on{{else}}switch-off{{/if}}" style="margin-top:3px" id="albumInfo_isshow">
              <span class="switch-text">{{if isshowinfo == 1}}开{{else}}关{{/if}}</span>
              <span class="switch-white"></span>
            </div>
        </td>
      </tr>
      <tr>
        <td align="right" class="form-cell" valign="top">显示相册：</td>
        <td class="cell-split">
            <div class="switch {{if display == 0}}switch-off{{else}}switch-on{{/if}}" style="margin-top:3px" id="album_isshow">
              <span class="switch-text">{{if display == 0}}关{{else}}开{{/if}}</span>
              <span class="switch-white"></span>
            </div>
        </td>
      </tr>
    </table>
</div>
</script>

<!-- 打开相册 -->
<div id="albumListBox" class="f12" style="display:none">
    <div id="photo_head" class="clearfix">
        <script id="photo_head_tmpl" type="text/html">
            <div class="upload-wrap">
                <img src="{{summary.picurl}}" alt="" />
            </div>
            <div class="fl lh30 mt20" style="width:630px">
                <p class="f12">图片({{total}})</p>
                  <span >
                      <span class="f12">图册描述：{{summary.info}}</span>
                  </span>
            </div>
        </script>
    </div>
    <div class="border-bottom mt10"></div>
    <ul class="album-list clearfix mt15" id="photo_grid" style="height:380px">
        <script id="photo_row_tmpl" type="text/html">
            {{each list as value i}}
            <li id="{{value.po_photo_listId}}" class="js-photo-item">
                <div class="album-border js-open-album">
                    <img src="{{value.picurl}}" alt="" class="album-pic">
                    <div class="album-opr-btn">
                        <span class="album-del js-del" title="删除图片"><i class="icon-op icon-op-del-w"></i></span>
                        <span class="album-set js-set" title="设为封面"><i class="icon-op icon-op-set-w"></i></span>
                    </div>
                </div>
                <p class="album-list-name">{{value.title}}</p>
            </li>
            {{/each}}
            <li class="album-add relative" id="fileuploadList"><i></i><span class="c-blue">上传图片</span><input id="fileupload2" type="file" name="file" multiple class="upload-photo" /></li>
        </script>
    </ul>
    <div id="paginationPhoto" class="pagination"></div>
</div>

<script type="text/javascript">
seajs.use(["service/o2o_application/album"], function (album){
    album.init();
});
</script>